<template>
  <div>
    <el-table :data="computedTableData" id="tables" :summary-method="getSummaries" show-summary border
      :span-method="spanMethods" style="width: 100%">
      <el-table-column label="序号" type="index" width="180"> </el-table-column>

      <el-table-column prop="date" label="数据日期"> </el-table-column>
      <el-table-column prop="no" sortable label="计量点编号"> </el-table-column>
      <el-table-column prop="name" sortable label="计量点名称">
      </el-table-column>

      <el-table-column v-for="(item, index) in newColumn" :key="'key' + index" :prop="item.prop" :label="item.label">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getPoint } from '../../../../utils/morePoint';
export default {
  computed: {
    computedTableData() {
      const newData = [...this.tableData]; // 创建一个新的数组，避免修改原始数据
      return newData;
    },

    newColumn() {
      let that = this;
      let newColumnList = []; //索引和prop放到这里来
      let array=[]
      //获取所有的column的值
      that.tableData.forEach((item, index) => {
        if (item.transFormlist) {
          item.transFormlist.forEach((item1) => {
            newColumnList.push({
              prop: "key" + item1.quarter,
              label: that.pointList[item1.quarter],
              order: item1.quarter,
            });
          });
          //把值塞进列表里面
          item.transFormlist.forEach((item1) => {
            let key = "key" + item1.quarter;
            this.tableData[index][key] = item1.realLoad;
          });
        }
      });
      let uniqueArr = newColumnList.filter(
        (item, index) =>
          newColumnList.findIndex((i) => i.prop === item.prop) === index
      );
      uniqueArr = uniqueArr.sort(this.compare("order"));

      return uniqueArr;
    },
  },
  created() {
    this.pointList = getPoint()
    debugger
  },
  data() {
    return {
      numbers: 568,
      pointList: [],//接收96个点的数据
      dataTWO: [
        {
          name1: "实际用电负荷",
          name2: "王小虎3",
        },
      ],
      tableData: [
        {
          id: "12987122",
          date: "2022-1-1",
          no: "3343434",
          name: "名称1",
          transFormlist: [
            {
              quarter: 1,
              realLoad: 12,
            },
            {
              quarter: 2,
              realLoad: 21,
            },
            {
              quarter: 3,
              realLoad: 30,
            },
             {
              quarter: 4,
              realLoad: 45,
            },
              {
              quarter: 56,
              realLoad: 45,
            },
          ],
        },
        {
          id: "12987123",
          date: "2022-1-2",
          no: "454545",
          name: "名称1",
          transFormlist: [
            {
              quarter: 1,
              realLoad: 10,
              query: 1,
              query2: 2,
            },
            {
              quarter: 2,
              realLoad: 15,
              query: 3,
              query2: 4,
            },
          ],
        },
        {
          id: "12987124",
          date: "2022-1-3",
          no: "3232",
          name: "名称1",
          transFormlist: [
            {
              quarter: 6,
              realLoad: 10,
              query: 1,
              query2: 2,
            },
            {
              quarter: 7,
              realLoad: 15,
              query: 3,
              query2: 4,
            },
          ],
        },
        {
          id: "12987125",
          date: "2022-1-4",
          no: "王小虎2",
          name: "名称1",
        },
        {
          id: "12987126",
          date: "2022-1-5",
          no: "34343",
          name: "名称1",
          transFormlist: [
            {
              quarter: 7,
              realLoad: 4,
              query: 1,
              query2: 2,
            },
            {
              quarter: 8,
              realLoad: 11,
              query: 3,
              query2: 4,
            },
          ],
        },
        {
          id: "12987126",
          date: "2022-1-6",
          no: "343434",
          name: "名称1",
        },
      ],
    };
  },
  methods: {
    //排序
    compare(property) {
      return function (obj1, obj2) {
        var value1 = obj1[property];
        var value2 = obj2[property];
        return value1 - value2; // 升序
      };
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = (
            <p>
              <div>合计</div>
            </p>
          );
          return;
        } else {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "N/A";
          }
        }
      });
      this.$nextTick(() => {
        const tds = document.querySelectorAll(
          "#tables .el-table__footer tr>td"
        );
        tds[0].colSpan = 4;   //合计合并的列数，这里包括序号
        tds[0].style.textAlign = "center";  //这里指的就是合计
        tds[1].style.display = "none";  //其他的隐藏
        tds[2].style.display = "none";//其他的隐藏
        tds[3].style.display = "none";//其他的隐藏
      }, 1000);
      return sums;
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-table_1_column_6 is-leaf el-table__cell .cell .point .hidden {
  color: rgba(0, 0, 0, 0) !important;
}
</style>
